<!-- element-plus drop-down 二次封装 -->

<template>
  <el-dropdown :trigger="trigger" @command="commandHanlder">
    <span>
      <slot></slot>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="(item, index) in dropMenuList" :key="item">
          <el-dropdown-item :command="item" :disabled="item.disabled || false">
            <el-icon v-if="item.icon">
              <component :is="item.icon.toLowerCase()"></component>
            </el-icon>
            <span>{{ $t(item.text) }}</span>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
const props = defineProps({
  /**
   * 下拉菜单列表
   */
  dropMenuList: {
    type: Array,
    default: () => []
  },
  /**
   * 触发方式
   */
  trigger: { type: String, default: "hover" }
});

const commandHanlder = (item, ctx, event) => {
  
  console.log("commandHanlder", item, ctx, event);
};
</script>

<style lang="less" scoped></style>
